<template>
  <div>
    <!-- 总可用余额 -->
    <div class="w-943 br-12 c-white balance_box">
      <div class="pt-28 pb-40 pl-16 pr-46">
        <div class="fs-18 lh-20 fw-600 balance_title">总可用余额</div>
        <div class="d-flex mt-20 justify-content-between">
          <div class="fs-56 lh-60 fw-600 ff-rb">${{ whole_total_money }}</div>
          <button
            type="button"
            class="button-004 primary button-004&#45;&#45;large chongzhi_btn"
            @click="dialogVisible = true"
          >
            <span>充值</span>
          </button>
        </div>
      </div>
    </div>
    <!-- 全球账户 -->
    <div class="mt-52 mb-30 d-flex justify-content-between align-items-center">
      <div class="fs-18 lh-20 fw-600 card_title">全球账户</div>
      <div class="d-flex btn_box">
        <button class="item_btn">资金划转</button>
        <button class="item_btn">付款</button>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col
        :span="8"
        v-for="item in accountList"
        :key="item.title"
        @click="toPage(item.to)"
      >
        <div class="br-12 fl1 card-item" :class="{ 'cursor-pointer': item.to }">
          <img :src="item.iconBg" alt="" class="card-item__iconbg" />
          <div class="d_al_center card_name mt-18 ml-20">
            <img :src="item.img" height="30" alt="" />
            <span class="mr-10 ml-4">{{ item.title }}</span>
          </div>

          <div class="fs-38 ml-20 mt-18 lh-53 fw-600 ff-rb c-000">
            {{ item.symbol }}
          </div>
          <div class="look_btn">查看账户</div>
        </div>
      </el-col>
    </el-row>
    <!-- 星座卡 -->
    <div class="mt-52 mb-30 d-flex justify-content-between align-items-center">
      <div class="fs-18 lh-20 fw-600 card_title">星座卡</div>
      <div class="d-flex btn_box">
        <button class="item_btn" @click="toPage('/prepaidCard-add')">
          新增星座卡
        </button>
        <button class="item_btn">申请开卡数</button>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col
        :span="8"
        v-for="item in cardList"
        :key="item.title"
        @click="toPage(item.to)"
      >
        <div class="br-12 fl1 card-item" :class="{ 'cursor-pointer': item.to }">
          <img :src="item.iconBg" alt="" class="card-item__iconbg" />
          <div class="d_al_center card_name mt-18 ml-20">
            <img :src="item.img" height="30" alt="" />
            <span class="mr-10 ml-4">{{ item.title }}</span>
          </div>

          <div class="fs-38 ml-20 mt-18 lh-53 fw-600 ff-rb c-000">
            {{ item.symbol }} {{ item.balance }}
          </div>
          <div class="look_btn">查看账户</div>
        </div>
      </el-col>
    </el-row>
    <!-- TestDialog -->
    <hsk-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :width="width"
      :before-close="beforeCloseHandler"
      :close-on-click-modal="false"
      :center="false"
      :showFooter="false"
      custom-class="custom-dialog"
      :show-footer="false"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      :confirm-loading="confirmLoading"
    >
      自定义内容及表单
    </hsk-dialog>
  </div>
</template>

<script>
  import card_icon01 from '@/assets/image/home/card_icon01.png'
  import card_icon02 from '@/assets/image/home/card_icon02.png'
  import card_icon03 from '@/assets/image/home/card_icon03.png'
  import chf_icon from '@/assets/image/home/chf_icon.png'
  import gpb_icon from '@/assets/image/home/gpb_icon.png'
  import usd_icon from '@/assets/image/home/usd_icon.png'
  import card_icon_bg01 from '@/assets/image/home/card-icon-bg01.png'
  import card_icon_bg02 from '@/assets/image/home/card-icon-bg02.png'
  import card_icon_bg03 from '@/assets/image/home/card-icon-bg03.png'
  import card_icon_bg04 from '@/assets/image/home/card-icon-bg04.png'
  import card_icon_bg05 from '@/assets/image/home/card-icon-bg05.png'
  import card_icon_bg06 from '@/assets/image/home/card-icon-bg06.png'
  import { mapActions, mapGetters } from 'vuex'
  import { toThousands } from '@/utils'
  import HuskDialog from '@/vab/components/VabDialog'

  export default {
    components: {
      HuskDialog,
    },
    data() {
      return {
        whole_total_money: null,
        cardList: null,
        accountList: null,
        // 弹窗
        title: '测试弹窗',
        dialogVisible: false,
        confirmLoading: true,
        width: '866',
      }
    },
    computed: {
      ...mapGetters({
        infoDetail: 'user/infoDetail',
      }),
    },
    created() {
      this.whole_total_money = toThousands(this.infoDetail.whole_total_money)
      this.cardList = [
        {
          title: '星座卡账户余额',
          balance: toThousands(this.infoDetail.money),
          img: card_icon01,
          iconBg: card_icon_bg01,
          symbol: '$',
        },
        {
          title: '星座卡余额',
          balance: toThousands(this.infoDetail.card_total_money),
          img: card_icon02,
          iconBg: card_icon_bg02,
          to: '/app/prepaidCard',
          symbol: '$',
        },
        {
          title: '剩余开卡数',
          balance: toThousands(this.infoDetail.card_remain),
          iconBg: card_icon_bg03,
          img: card_icon03,
          symbol: '$',
        },
      ]
      this.accountList = [
        {
          title: 'USD',
          balance: '--',
          img: usd_icon,
          iconBg: card_icon_bg04,
          symbol: '$',
        },
        {
          title: 'GPB',
          balance: '--',
          img: gpb_icon,
          iconBg: card_icon_bg05,
          symbol: '￡',
        },
        {
          title: 'CHF',
          balance: '--',
          img: chf_icon,
          iconBg: card_icon_bg06,
          symbol: '$',
        },
      ]
    },
    methods: {
      toPage(item) {
        this.$router.push(item)
      },
      beforeCloseHandler(done) {
        this.$message.info('点击了“X”操作')
        done()
      },
      handleConfirm() {
        this.$message.success('点击了确定按钮')
      },
      handleCancel() {
        this.$message.info('点击了取消按钮')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .balance_box {
    position: relative;
    overflow: hidden;
    background-image: url('../../../assets/image/home/balance_bg.png');
    background-repeat: repeat-x;
    background-position: left;
    background-size: 100%;
  }
  .balance_title {
    position: relative;
    padding-left: 10px;
    border-left: 4px solid #fff;
  }
  .chongzhi_btn {
    width: 203px;
    height: 56px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 56rpx;
    color: #6b1ce9;
    text-align: center;
    background: #ffffff;
    border-radius: 28px;
  }

  .card_title {
    padding-left: 10px;
    color: #333;
    border-left: 4px solid #6b1ce9;
  }

  .btn_box {
    text-align: center;

    .item_btn {
      min-width: 106px;
      height: 30px;
      font-size: 14px;
      line-height: 26px;
      color: #6b1ce9;
      cursor: pointer;
      border: 1px solid #6b1ce9;
      border-radius: 15px;

      &:last-child {
        margin-left: 10px;
        color: #fff;
        background: #6b1ce9;
      }
    }
  }

  .card-item {
    position: relative;
    z-index: 0;
    margin-right: 27px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease 0s;

    .card-item__iconbg {
      position: absolute;
      top: 42px;
      right: 52px;
      width: 60px;
      height: 60px;
      background: url('../../../assets/image/home/card_bg02.png') no-repeat
        center;
      background-size: 100% 100%;
    }

    &.cursor-pointer:hover {
      background: #f1eff7;
    }

    &:last-of-type {
      margin-right: 0;
    }

    .card_name {
      font-size: 14px;
      color: #999;
    }

    .look_btn {
      padding: 20px 0;
      margin: 15px 20px 0;
      font-size: 15px;
      font-weight: 500;
      line-height: 21px;
      color: #666;
      text-align: center;
      border-top: 1px solid #f3f3f3;
    }
  }

  .cursor-pointer {
    cursor: pointer;
  }
</style>
